<template>
  <div class="gankio-wrapper">
    <!--首页banner图-->
    <el-carousel class="gankio-banner-content" height="500px" :interval="5000" arrow="always">
      <el-carousel-item v-for="(item,index) in bannerDataList" :key="index">
        <div class="item-content">
          <img :fit="'cover'" :src="item.image"/>
          <!--    <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>-->
          <span>{{ item.title }}</span>
        </div>
      </el-carousel-item>
    </el-carousel>
    <technology-menu-module @menuSelectListener="menuSelectListener"></technology-menu-module>
    <technology-table-module :menuType="menuType" :menuBigType="menuBigType"></technology-table-module>
  </div>
</template>

<script>
  import { getHomePageBanner } from '../../api/index'
  import TechnologyTableModule from '@/components/gankio/TechnologyTableModule.vue'
  import TechnologyMenuModule from '@/components/gankio/TechnologyMenuModule.vue'

  export default {
    name: 'Index',
    components: {
      TechnologyTableModule,
      TechnologyMenuModule
    },
    data () {
      return {
        menuType: 'Girl',
        menuBigType: 'Girl',
        bannerDataList: []
      }
    },
    mounted () {
      this.getHomePageBanner()
    },
    methods: {
      getHomePageBanner () {
        getHomePageBanner().then(data => {
          if (data.status === 100) {
            this.bannerDataList = data.data
          }
        }).catch(error => {

        })
      },
      menuSelectListener (menuType) {
        this.menuType = menuType.type
        this.menuBigType = menuType.bigType
      }
    }
  }
</script>

<style lang="scss" ref="stylesheet/scss" scoped>
  .gankio-wrapper {
    width: 100%;
    height: 100%;

    .gankio-banner-content {
      width: 100%;
      margin-bottom: 20px;
      height: 100%;

      .el-carousel__item {
        color: #475669;
        font-size: 18px;
        margin: 0;
        .item-content {

          img {
            object-fit: cover;
            width: 100%;
            height: 500px;
          }

          span {
            left: 20px;
            font-weight: bold;
            bottom: 20px;
            font-size: 24px;
            color: white;
            position: absolute;
          }
        }
      }

      .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
      }

      .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
      }
    }
  }

</style>

